<template>
  <div id="constructionPlanManagement">
    <el-menu
      default-active="1"
      class="el-menu-vertical-constructionPlanManagement"
      @select="selectleOpen"
      @close="handleClose"
    >
      <el-menu-item index="1">
        <template slot="title">
          <i class="el-icon-house"></i>
          <span>日计划</span>
        </template>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-message"></i>
        <span slot="title">周计划</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-data-analysis"></i>
        <span slot="title">月计划</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-place"></i>
        <span slot="title">计划请点</span>
      </el-menu-item>
      <el-menu-item index="5">
        <i class="el-icon-chat-dot-round"></i>
        <span slot="title">计划销点</span>
      </el-menu-item>
      <el-menu-item index="6">
        <i class="el-icon-coin"></i>
        <span slot="title">临时计划</span>
      </el-menu-item>
    </el-menu>
    <div class="constructionPlanContent">
      <dailyPlan v-if="key == 1"></dailyPlan>
      <weeklyPlan v-if="key == 2"></weeklyPlan>
      <monthlyPlan v-if="key == 3"></monthlyPlan>
      <plannedInventory v-if="key == 4"></plannedInventory>
      <plannedSalesPoints v-if="key == 5"></plannedSalesPoints>
      <temporaryPlan v-if="key == 6"></temporaryPlan>
    </div>
  </div>
</template>

<script>
import dailyPlan from './dailyPlan/index.vue'

import weeklyPlan from './weeklyPlan/index.vue'

import monthlyPlan from './monthlyPlan/monthlyPlanindex.vue'

import plannedSalesPoints from './plannedSalesPoints/index.vue'

import plannedInventory from './plannedInventory/plannedInventory.vue'

import temporaryPlan from './temporaryPlan/index.vue'

export default {
  data() {
    return {
      key: 1,
    }
  },
  components: {
    dailyPlan,
    weeklyPlan,
    monthlyPlan,
    plannedInventory,
    plannedSalesPoints,
    temporaryPlan,
  },
  created() {},
  methods: {
    selectleOpen(key, keyPath) {
      console.log(key, keyPath)
      this.key = key
    },
    handleClose(key, keyPath) {
      this.key = key
      console.log(key, keyPath)
    },
  },
}
</script>

<style lang="less" scoped>
#constructionPlanManagement {
  height: 100%;
  display: flex;
  width: 100%;
  :deep(.el-textarea__inner) {
    border: none;
    background-color: rgba(255, 255, 255, 0);
    resize: none;
  }
  .formTable {
    background-color: #409eff;
    color: white;
  }
}
.el-menu-vertical-constructionPlanManagement {
  width: 18rem;
  height: 61rem;
}
.constructionPlanContent {
  width: 100%;
  position: relative;
}
</style>
<style lang="less">
#constructionPlanManagement {
  .el-table__header {
    .formTable {
      background-color: #409eff;
      color: white;
    }
  }

  th.el-table__cell {
    background-color: transparent;
  }
  .saveBtn {
    width: 30%;
    margin: 0 auto;
    margin-top: 1rem;
  }
}
</style>
